<template>
  <div class="container">
    <div class="input-area">
      <div class="input-cell with-grey-bottom-border">
        <div class="header">真实姓名：</div>
        <input v-model="realname" type="text" />
      </div>
      <div class="input-cell">
        <div class="header">身份证号：</div>
        <input v-model="idNumber" type="number" />
      </div>
      <div class="input-cell">
        <div class="header">银行卡号：</div>
        <input v-model="card_no" type="number" />
      </div>
      <div class="input-cell">
        <div class="header">开户银行：</div>
        <input v-model="bank" />
      </div>
    </div>
    <div class="id-card">
      <div class="title">
        请上传身份照照片
      </div>
      <div class="card-img">
        <div class="card-cell">
          <div v-if="!imgFront">
            <label for="card-front">
              <img src="@/assets/实名认证/sfz2.png" alt="" />
            </label>
            身份照正面
          </div>
          <img @click="imgFront = ''" v-else :src="imgFront" alt="" />
        </div>
        <div class="card-cell">
          <div v-if="!imgBack">
            <label for="card-back">
              <img src="@/assets/实名认证/sfz1.png" alt="" />
            </label>
            身份照背面
          </div>
          <img @click="imgBack = ''" v-else :src="imgFront" alt="" />
        </div>
        <input
          @change="frontChange"
          type="file"
          id="card-front"
           accept="image/*"
          style="position:absolute; clip:rect(0 0 0 0);"
        />
        <input
          @change="backChange"
          type="file"
          id="card-back"
           accept="image/*"
          style="position:absolute; clip:rect(0 0 0 0);"
        />
      </div>
    </div>
    <button @click="submit" class="save" :style="{background: mainColor}">确认</button>
  </div>
</template>

<script>
import { realNameAuth } from "@/api/profile";
import { fileUpload } from "@/api/file";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      imgFront: "",
      imgBack: "",
      realname: "",
      idNumber: null,
      card_no: null,
      bank: null
    };
  },
  computed: {
    ...mapState({
      mainColor: state => state.app.mainColor
    })
  },
  methods: {
    ...mapMutations(["setIs_identity"]),
    frontChange() {
      let formData = new FormData();
      formData.append("file", document.getElementById("card-front").files[0]);
      fileUpload(formData).then(res => {
        if (res.status === 200) {
          this.imgFront = res.data.data.file;
        }
      });
    },
    backChange() {
      let formData = new FormData();
      formData.append("file", document.getElementById("card-back").files[0]);
      fileUpload(formData).then(res => {
        if (res.status === 200) {
          this.imgBack = res.data.data.file;
        }
      });
    },
    submit() {
      if (!this.realname.trim()) {
        this.$dialog.toast({
          mes: "请填写真实姓名",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.idNumber) {
        this.$dialog.toast({
          mes: "请填写身份证号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }

      if (!this.card_no) {
        this.$dialog.toast({
          mes: "请填写提现银行卡号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.bank) {
        this.$dialog.toast({
          mes: "请填写开户行",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (this.imgBack === "") {
        this.$dialog.toast({
          mes: "请上传身份证背面",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      realNameAuth({
        real_name: this.realname,
        card_no: this.idNumber,
        front: this.imgFront,
        verso: this.imgBack,
        bank: this.bank,
        id_card: this.card_no
      }).then(res => {
        if (res.status === 200) {
          this.setIs_identity(1);
          this.$dialog.toast({
            mes: "提交成功",
            timeout: 1500,
            icon: "success"
          });
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  font-size: 0.64rem;
  color: #444444;
  .input-area {
    margin: 0.48rem 0;
    background: #fff;
    padding: 0 3.2%;
    .input-cell {
      display: flex;
      height: 2rem;
      line-height: 2rem;
      input {
        height: 2rem;
        border: none;
      }
    }
  }
  .id-card {
    background: #fff;
    padding: 0 3.2%;
    .title {
      height: 2rem;
      line-height: 2rem;
    }
    .card-img {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0 2rem;
      .card-cell {
        height: 4rem;
        width: 6.56rem;
        text-align: center;
        color: #666666;
        font-size: 0.48rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .save {
    position: fixed;
    width: 100%;
    z-index: 1;
    height: 2rem;
    color: #fff;
    font-size: 0.64rem;
    font-weight: bold;
    border: none;
    background: rgba(0, 120, 255, 1);
    left: 0;
    bottom: 0;
  }
}
</style>
